import { useCallback, useState } from "react";
import { Form, Input, Button, Checkbox, message, Row } from "antd";
// import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import MyIcon from "@/components/icon";
import { getLocalUser, saveToken, encryptByDES } from "@/utils";
import { login } from "@/api";
import "./index.less";
import { useThemeToken } from "@/hooks";



const IPT_RULE_USERNAME = [
  {
    required: true,
    message: "请输入用户名",
  },
];

const IPT_RULE_PASSWORD = [
  {
    required: true,
    message: "请输入密码",
  },
];

function Login() {
  const [btnLoad, setBtnLoad] = useState(false);
  // const navigate = useNavigate()
  const dispatch = useDispatch()
  const token = useThemeToken()
  const onFinish = useCallback((values: any) => {
    setBtnLoad(true);
    const { password } = values;
    if (password) {
      values.password = encryptByDES(password);
    }
    login(values)
      .then((data) => {
        setBtnLoad(false);
        if (!data) return
        saveToken(data?.token);
        message.success('登录成功');
        window.location.pathname = "/rock/public-customer/index";
      })
      .catch(() => {
        setBtnLoad(false);
      });
  }, []);
  return (
    <div className="login-container" style={{ backgroundColor: token.colorBgContainer }}>
      <div className="wrapper">
        <div className="title">rock</div>
        <div className="welcome">欢迎使用，请先登录</div>
        <Form
          className="login-form"
          initialValues={{
            remember: true,
            ...getLocalUser(),
          }}
          onFinish={onFinish}
        >
          {/* <Form.Item name="account" rules={IPT_RULE_USERNAME}>
            <Input
              prefix={<MyIcon type="icon_nickname" />}
              placeholder="账号:admin/user"
            />
          </Form.Item>
          <Form.Item name="pswd" rules={IPT_RULE_PASSWORD}>
            <Input
              prefix={<MyIcon type="icon_locking" />}
              type="password"
              autoComplete="off"
              placeholder="密码:admin123/user123"
            />
          </Form.Item>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form.Item> */}
          <Form.Item name="username" rules={IPT_RULE_USERNAME}>
            <Input
              prefix={<MyIcon type="icon_nickname" />}
              placeholder="请输入账号"
            />
          </Form.Item>
          <Form.Item name="password" rules={IPT_RULE_PASSWORD}>
            <Input
              prefix={<MyIcon type="icon_locking" />}
              type="password"
              autoComplete="off"
              placeholder="请输入密码"
            />
          </Form.Item>
          {/* <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>
          </Form.Item> */}
          <Row justify="space-around">
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
              loading={btnLoad}
            >
              登录
            </Button>
            <Button htmlType="reset">重置</Button>
          </Row>
        </Form>
      </div>
    </div>
  );
}

export default Login;
